|
vue+element实现单条打印、批量打印(图片)
winodw.print()方法
print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框，让用户可以设置打印请求。最简单的打印就是直接调用window.print()，当然用 document.execCommand('print') 也可以达到同样的效果。默认打印页面中body里的所有内容。
批量打印
打印
export default {
data() {
return {
tableData: [{
id: 1,
src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
},
{
id: 2,
src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
},
{
id: 3,
src:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
}
],
multipleSelection: [], //存放将要打印的数据
}
},
methods: {
print(row={}) {
if(row.src){
this.multipleSelection.push(row)
}
this.$nextTick(()=>{
var bdhtml=window.document.body.innerHTML; // 获取body的内容
var jubuData = document.getElementById("printcontent").innerHTML; //获取要打印的区域内容
window.document.body.innerHTML= jubuData;
window.print(); // 调用浏览器的打印功能
window.document.body.innerHTML=bdhtml; // body替换为原来的内容
window.location.reload(); //刷新页面，如果不刷新页面再次点击不生效或打印使用新窗口实现打印
})
},
allPrint(){
this.print()
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
.dashboard-container {
.table_img {
width: 50px;
height: 50px;
}
#printcontent{
display: none;
}
}
//使用媒体查询 设置预览时的样式
@media print{
@page {
margin: 0;
size: portrait; //设置打印布局portrait为纵向；landscape为横向
}
#printcontent{
width: 100%;
}
.print_img{
display: block;
width: 100%;
height: 100%;
margin: auto auto;
}
}
|